<template>
    <div class="unit-blk">
        <div class="unit-search flex">
            <el-input
                class="flex-1"
                placeholder="请输入单位名称"
                v-model.trim="filter.name"
            ></el-input>
            <el-button type="primary" @click="search">
                <i class="iconfont icon-search"></i>
            </el-button>
        </div>
        <ul class="unit-list" v-loading="loading" :style="{ height: height + 'px' }">
            <li
                :class="{
                    active: activeUnit && activeUnit.id == item.id,
                }"
                v-for="(item, index) in dataList"
                :key="index"
                @click="onUnitSelect(item)"
            >
                {{ item.name }}
            </li>
            <li class="no-data" v-if="dataList.length == 0">暂无数据</li>
        </ul>
        <div class="paganation">
            <a href="javascript:;" :class="{ disabled: currentPage == 1 }" @click="prevPage">
                上一页
            </a>
            {{ currentPage }}
            <a
                href="javascript:;"
                :class="{ disabled: loaded || dataList.length == 0 }"
                @click="nextPage"
                >下一页</a
            >
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex"
export default {
    name: "UnitList",
    props: {
        height: {
            type: Number,
            default: 300,
        },
    },
    data() {
        return {
            dataList: [],
            currentPage: 1,
            pageSize: 20,
            loading: false,
            loaded: false,
            filter: {},
            activeUnit: null,
            isInit: true,
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
    },
    created() {
        this.getData(1)
    },
    methods: {
        getData(page = 1,area) {
            const params = Object.assign(
                {
                    page,
                    limit: this.pageSize,
                    ...(area && { area }),
                },
                this.filter
            )
            this.loading = true
            this.$get("/business/business/businessListPage", params).then(
                (res) => {
                    this.loading = false
                    const { data } = res
                    this.dataList = data.Items
                    this.loaded = data.currentPage == data.pages
                    this.currentPage = page
                    if (this.isInit && this.siteInfos.userType == 1) {
                        this.onUnitSelect(null) // this.dataList[0]
                    }
                    this.isInit = false
                },
                (err) => {
                    this.loading = false
                    this.$message.error(err.msg || "系统错误")
                }
            )
        },
        nextPage() {
            if (this.loaded) return
            this.getData(this.currentPage + 1)
        },
        prevPage() {
            if (this.currentPage == 1) return
            this.getData(this.currentPage - 1)
        },
        onUnitSelect(item) {
            if (this.activeUnit && item && item.id == this.activeUnit.id) {
                this.$emit("select", null)
                this.activeUnit = null
                return
            }
            this.$emit("select", item)
            this.activeUnit = item
        },
        search() {
            this.getData()
        },
    },
}
</script>
<style lang="less" scoped>
.unit-blk {
    color: #bfdff7;
}
.unit-list {
    overflow: auto;
    & > li {
        margin: 10px 0;
        cursor: pointer;
        &:hover {
            color: #3f95ff;
        }
        &.active {
            color: #3f95ff;
            font-weight: bold;
        }
        &.no-data {
            padding: 20px 0;
            text-align: center;
            opacity: 0.5;
            cursor: default;
            &:hover {
                color: #bfdff7;
            }
        }
    }
}
.paganation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    & > a {
        &.disabled {
            color: #999;
            cursor: default;
        }
    }
}
</style>
